<template>
<section v-loading="loading">
   <!-- 查询框 -->
   <div class="searchbox">
      <el-form :inline="true" :model="query" class="demo-form-inline fl">
         <el-form-item>
            <el-input v-model="query.k" placeholder="姓名/手机号" size="medium"></el-input>
         </el-form-item>
         <el-form-item>
            <el-select v-model="query.kemu" placeholder="科目" size="medium">
               <el-option label="全部" value=""></el-option>
               <el-option label="科目一" value="1"></el-option>
               <el-option label="科目二" value="2"></el-option>
               <el-option label="科目三" value="3"></el-option>
               <el-option label="科目四" value="4"></el-option>
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-select v-model="query.status" placeholder="状态" size="medium">
               <el-option label="全部" value=""></el-option>
               <el-option label="已申请" value="0"></el-option>
               <el-option label="已预约" value="1"></el-option>
               <el-option label="通过" value="2"></el-option>
               <el-option label="未通过" value="3"></el-option>
               <el-option label="缺考" value="4"></el-option>
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" size="small" @click="getData" icon="el-icon-search">搜&nbsp;&nbsp;索</el-button>
         </el-form-item>
      </el-form>
   </div>
   <!-- 主体内容 -->
   <div @contextmenu="$parent.addMenu([{name:'刷新考试预约',method:'getData',icon:'icon-shuaxin'}])">
   <el-table ref="multipleTable" :data="listData" tooltip-effect="dark" style="text-align:center" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" @selection-change="handleSelectionChange"></el-table-column>
      <el-table-column prop="real_name" label="姓名" min-width="12%" ></el-table-column>
      <el-table-column label="预约科目" min-width="10%" >
         <template slot-scope="scope">
            <div v-if = "scope.row.kemu==1">科目一</div>
            <div v-else-if = "scope.row.kemu == 2">科目二</div>
            <div v-else-if = "scope.row.kemu == 3">科目三</div>
            <div v-else-if = "scope.row.kemu == 4">科目四</div>
         </template>
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" min-width="15%" ></el-table-column>
      <el-table-column label="报名时间" min-width="18%" >
         <template slot-scope="scope">{{ scope.row.create_time|date('Y-m-d H:i') }}</template>
      </el-table-column>
      <el-table-column label="考试时间" min-width="18%" >
         <template slot-scope="scope">{{ scope.row.exam_time|date('Y-m-d H:i') }}</template>
      </el-table-column>
      <el-table-column label="状态" min-width="12%" >
         <template slot-scope="scope" >
            <font v-if="scope.row.status==4" color="#E6A23C">缺考</font>
            <font v-else-if="scope.row.status==3" color="#F56C6C">未通过</font>
            <font v-else-if="scope.row.status==2" color="#909399">通过</font>
            <font v-else-if="scope.row.status==1" color="#67C23A">已预约</font>
            <font v-else-if="scope.row.status==0">已申请</font>
         </template>
      </el-table-column>
      <el-table-column label="操作" min-width="12%" >
         <template slot-scope="scope">
            <div @click="dialog(scope.row)" style="color:#67C23A;cursor:pointer">编辑</div>
         </template>
      </el-table-column>
   </el-table>
   <div class="breakpage" v-if="page.total>0">
      <el-button type="primary" plain size="medium" @click="multiple" style="float:left;">批量编辑</el-button>
      <!-- 分页 -->
      <el-pagination layout="total, sizes, prev, pager, next" background :current-page="parseInt(page.curpage)" :page-size="parseInt(page.pagesize)" :total="parseInt(page.total)" @current-change="handleCurrentChange" @size-change="handleSizeChange" >
      </el-pagination>
   </div>
 </div>
   <!-- ↓↓编辑弹窗↓↓ -->
   <el-dialog title="编辑" :visible.sync="editVisible" width="600px">
      <el-form v-if="editVisible" :model="edit" :rules="rules" ref="edit" label-width="100px">
         <el-form-item label="预约状态" prop="status">
            <el-select v-model="edit.status" style="width:80%">
               <el-option label="已申请" value="0" disabled></el-option>
               <el-option label="已预约" value="1"></el-option>
               <el-option label="通过" value="2"></el-option>
               <el-option label="未通过" value="3"></el-option>
               <el-option label="缺考" value="4"></el-option>
            </el-select>
         </el-form-item>
         <el-form-item label="考试时间" prop="exam_time" v-if="edit.status==1">
            <el-date-picker v-model="edit.exam_time" type="datetime" style="width:80%"></el-date-picker>
         </el-form-item>
         <el-form-item label="考试地点" prop="exam_address" v-if="edit.status==1" style="width:84%">
            <el-input type="textarea" :rows="3" v-model="edit.exam_address"></el-input>
         </el-form-item>
         <el-form-item label="备注" style="width:84%">
            <el-input type="textarea" :rows="3" v-model="edit.remark"></el-input>
         </el-form-item>
      </el-form>
      <div slot="footer">
         <el-button size="small" @click="editVisible=false">取 消</el-button>
         <el-button size="small" type="primary" @click="update('edit')">确 定</el-button>
      </div>
   </el-dialog>
   <!-- ↑↑编辑弹窗↑↑ -->
</section>
</template>

<script>
import * as api from '../api/index';
import { date } from '../lib/function';
export default {
   name: 'exam',
   data() {
      return {
         m: 'exam',
         query: {}, //搜索数据
         multipleSelection: [],
         editVisible: false,
         edit: {},
         rules: {
            status: [
               { required: true, message: '请选择状态', trigger: 'blur' }
            ],
            exam_time: [
               { required: true, message: '考试时间不能为空', trigger: 'blur' }
            ],
            exam_address: [
               { required: true, message: '考试地点不能为空', trigger: 'blur' }
            ]
         }
      }
   },
   computed: {
      listData() {
         return this.$store.state[this.m].data;
      },
      page() {
         return this.$store.state[this.m].page;
      },
      loading() {
         return this.$store.state[this.m].loading;
      }
   },
   methods: {
      handleSelectionChange(val) {
         this.multipleSelection = val;
      },
      getData() { //更新列表数据
         this.$store.dispatch(
            this.m + '/getData',
            JSON.parse(JSON.stringify(this.query)),
         );
      },
      dialog(row){
         this.editVisible = true;
         this.edit = JSON.parse(JSON.stringify(row));
         this.edit.id=[];
         this.edit.id.push(row.id);
         this.edit.exam_time = date(this.edit.exam_time,'Y-m-d H:i:s');
      },
      update(v){
         let _this = this;
         this.$refs[v].validate((valid) => {
            if (valid) {
               api.exam.update(_this.edit, res => {
                  if (res.status == 1) {
                     _this.getData();
                     _this.editVisible = false;
                  }
                  else _this.$message(res);
               });
          } else return false;
         });
      },
      multiple(){
         var m = this.multipleSelection;
         if (m.length==0) return;   //无勾选项直接返回
         var kemu = m[0].kemu;
         var status = m[0].status;
         for(var prop in m){  //不相同返回提示
            if(m[prop].kemu!=kemu || m[prop].status!=status){
               return this.$message({
                  showClose: true,
                  message: '批量操作，“科目” 和 “状态” 必须相同',
                  type: 'warning',
                  center:true,
               });
            };
         }
         this.edit ={};
         this.edit.id=[];
         for(var prop in m){
            this.edit.id.push(m[prop].id);
         }
         this.editVisible = true;
      },
      handleCurrentChange(p){
         this.query.p = p;
         this.getData();
      },
      handleSizeChange(pagesize){
         this.query.pagesize = pagesize;
         this.getData();
      },
   },
   filters: {
      date
   },
   created() {
      if(this.$parent.school.current.id==undefined||this.$store.state[this.m].school_id!=this.$parent.school.current.id) {
        this.query={};
        this.getData();
        this.$store.commit(this.m+'/update',{type:'school_id',data:this.$parent.school.current.id});
      }else{
        this.query=JSON.parse(JSON.stringify(this.$store.state[this.m].query));
      }
   }
}
</script>
